<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base :: common_header(~{::title},~{::link})">
    <meta charset="UTF-8"/>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" th:href="@{/admin-ui/plugins/DataTables-1.10.16/datatables.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/admin-ui/plugins/DataTables-1.10.16/css/dataTables.bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{/admin-ui/css/app.css}" id="maincss"/>
</head>
<body>

<div id="cx-app" class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Data Tables |

                </div>
                <div class="panel-body">
                    <datatables-view v-bind:tableinfo="tableInfo"></datatables-view>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- =============== VENDOR SCRIPTS ===============-->
<!-- MODERNIZR-->
<script type="application/javascript" th:src="@{/admin-ui/plugins/modernizr/modernizr.custom.js}"></script>
<script type="application/javascript" th:src="@{/admin-ui/js/vue-bootstrap.js}" ></script>
<!-- STORAGE API-->
<script type="application/javascript" th:src="@{/admin-ui/plugins/jQuery-Storage-API/jquery.storageapi.js}"></script>
<!-- JQUERY EASING-->
<script type="application/javascript" th:src="@{/admin-ui/plugins/jquery.easing/js/jquery.easing.js}"></script>
<script type="application/javascript" th:src="@{/admin-ui/plugins/jquery.cookie.js/jquery.cookie.js}"></script>
<!-- ANIMO-->
<script type="application/javascript" th:src="@{/admin-ui/plugins/animo.js/animo.js}"></script>
<!-- LOCALIZE-->
<script type="application/javascript" th:src="@{/admin-ui/plugins/jquery-localize-master/dist/jquery.localize.min.js}"></script>
<script type="application/javascript" th:src="@{/admin-ui/plugins/DataTables-1.10.16/datatables.min.js}"></script>
<script type="application/javascript" th:src="@{/admin-ui/plugins/DataTables-1.10.16/js/dataTables.bootstrap.js}"></script>

<script type="application/javascript" th:src="@{/admin-ui/js/common.js}"></script>
<script type="application/javascript">
    (function(window, document, $, undefined){
        $(function () {
            var datatable = $('#datatable').dataTable({
//                l - 每页显示行数的控件
//                f - 检索条件的控件
//                t - 表格控件
//                i - 表信息总结的控件
//                p - 分页控件
//                r - 处理中的控件
                'dom': 'tilpr',
                'paging':   true,  // 是否显示分页
                'ordering': true,  // 是否列排序
                'info':     true,  // 是否在左下角显示列表信息
                'searching': false, //是否显示默认搜索
                "serverSide" : true,//是否服务器端分页、过滤数据
                "ajax": loadData,
                columns:[
                    {'title':'用户名','data':'username'},
                    {'title':'邮箱','data':'email'},
                    {'title':'创建人','data':'createBy'},
                    {'title':'创建时间','data':'createTime'},
                    {'title':'修改时间','data':'updateTime'}
                ],
                oLanguage: {
                    sSearch:      'Search all columns:',

                    sLengthMenu:  '每页记录 _MENU_ ',
                    info:         'Showing page _PAGE_ of _PAGES_',
                    zeroRecords:  'Nothing found - sorry',
                    infoEmpty:    'No records available',
                    infoFiltered: '(filtered from _MAX_ total records)'
                }
            }).api();
            
            function loadData(data, callback,settings) {
                console.log(data);
                $.ajax({
                    "url": "/uc/userApi/page",
                    "type": "POST",
                    'data':data,
                    'dataType':"json",
                    'headers': {
                        'X-XSRF-TOKEN':$.cookie('XSRF-TOKEN')
                    },
                    'success':function (result) {
                        callback(result);
                    }
                });
            }
        });
    })(window, document, window.jQuery);


    var tableInfo = {
        columns:[
            {'name':'用户名','code':'username'},
            {'name':'邮箱','code':'email'},
            {'name':'创建人','code':'createBy'},
            {'name':'创建时间','code':'createTime'},
            {'name':'修改时间','code':'updateTime'}
        ],
        dataRow:[{}]
    };

    var vm = new Vue({
        el:'#cx-app',
        data:{
            'tableInfo':tableInfo,
            userInfo:{}
        },
        methods:{
            getUser:function () {
                console.log($.cookie('XSRF-TOKEN'));

                //var vue = this;
                /*$.ajax({
                    url:"/uc/userApi/list",
                    type:'GET',
                    data:{},
                    success:function(result){
                        console.log(result);
                        if (result){
                            vue.tableInfo.dataRow = result;
                        }
                    }
                });*/
            }
        },
        mounted:function () {
            this.getUser();
        }
    });

</script>
</body>
</html>